<template>
  <div class="api-container">
    <div class="api-name">
      <span>{{this.$store.state.apiDetail.name}}</span>
      <!--<IconButton display="inline-flex" class="index-menu-item" font-class="icon-zidingyi" weight="200" color="gray"></IconButton>-->
    </div>
    <div class="api-uri">
      <div class="api-method">{{this.$store.state.apiDetail.method}}</div>
      <span style="padding-left: 15px">https://localhost:8080/demo/hello/{abc}</span>
    </div>
    <DataTable :table-name="'Request Header'" :columns="this.columns" :data="this.tabData" :readonly="readonly"></DataTable>
    <DataTable :table-name="'Request'" :columns="this.columns" :data="this.tabData" :readonly="readonly"></DataTable>
    <DataTable :table-name="'Response'" :columns="this.columns" :data="this.tabData" :readonly="readonly"></DataTable>
  </div>
</template>

<script>
  import DataTable from '../components/common/data-table'
  import IconButton from "../components/common/icon-button";

  export default {
    name: "ApiDetail",
    components: {
      IconButton,
      DataTable
    },
    data() {
      return {
        apiDetail: this.$store.state.apiDetail,
        columns: {colName: '字段名', colType: '类型', colDesc: '说明'},
        tabData: [
          {
            colName: 'id',
            colType: 'number',
            colDesc: 'ID'
          },
          {
            colName: 'name',
            colType: 'string',
            colDesc: '名字'
          },
          {
            colName: 'desc',
            colType: 'string',
            colDesc: '说明'
          }
        ],
        readonly: true
      }
    },
    created() {
      console.log(this.$store.state.apiDetail);
      this.apiDetail = this.$store.state.apiDetail;

    },

    mounted() {
      this.apiDetail = this.$store.state.apiDetail;
    },
    methods: {}
  }
</script>
<style scoped>
  .api-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .api-name {
    padding: 15px;
    font-size: 25px;
    font-weight: bold;
    font-family: Consolas;
    color: rgba(80, 80, 80, 0.9);
  }

  .api-uri {
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-family: "Source Code Pro";
    color: rgba(80, 80, 80, 0.9);
  }

  .api-method {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    font-family: "Source Code Pro";
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 5px;
    color: white;
    background-color: #3e3e3e;
  }

</style>
